<template>
  <div>
    <div id="centreLeft2Chart" style="width:100%; height: 4.625rem;"></div>
  </div>
</template>

<script>
const echarts = require("echarts");
export default {
  data() {
    return {
      myData:[]
    };
  },
  mounted() {
    this.drawPie();
    this.charTimg();
  },
  methods: {
    charTimg() {
      setInterval(() => {
        this.drawPie();
      }, 10000);
    },
    async drawPie(sidebar) {
      // 基于准备好的dom，初始化echarts实例
      let myChartPieLeft = echarts.init(
        document.getElementById("centreLeft2Chart")
      );
      //  更新数据----------------------------------------------------------------

      const res = await this.$http.get('/order/details')
      let myData=res
      let nameList=[]
      myData.forEach((o)=>{

        nameList.push(o["name"])
      })
      // let myMax=0
      // let myMin=100000000
      // res.forEach((o)=>{
      //
      //   if (o["value"]>myMax){
      //     myMax=o["value"]
      //   }
      //   if(o["value"]<myMin){
      //     myMin=o["value"]
      //   }
      // })
      // myMax=myMax*1.5
      //  ----------------------------------------------------------------



      let option = {

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: nameList,
          textStyle: {
            color: '#BBB',
          },
        },
        series: [
          {
            name: '销售额',
            type: 'pie',
            radius: '75%',
            center: ['50%', '47%'],
            selectedMode: 'single',
            data: myData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };


      // let option = {
      //   // backgroundColor: '#2c343c',
      //   // title: {
      //   //   text: 'Customized Pie',
      //   //   left: 'center',
      //   //   top: 20,
      //   //   textStyle: {
      //   //     color: '#ccc'
      //   //   }
      //   // },
      //
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: '{a} <br/>{b} : {c} ({d}%)'
      //   },
      //   visualMap: {
      //     show: false,
      //     min: myMin,
      //     max: myMax,
      //     inRange: {
      //       colorLightness: [0, 1]
      //     }
      //   },
      //   series: [
      //     {
      //       name: '销售额',
      //       type: 'pie',
      //       radius: [0,'70%'],
      //       center: ['50%', '50%'],
      //       data: myData.sort(function (a, b) { return a.value - b.value; }),
      //       roseType: 'radius',
      //       label: {
      //         color: 'rgba(255, 255, 255, 0.3)'
      //       },
      //       labelLine: {
      //         lineStyle: {
      //           color: 'rgba(255, 255, 255, 0.3)'
      //         },
      //         smooth: 0.2,
      //         length: 10,
      //         length2: 20
      //       },
      //       itemStyle: {
      //         color: '#c20917',
      //         shadowBlur: 200,
      //         shadowColor: 'rgba(0, 0, 0, 0.5)',
      //         // borderColor:'rgba(200, 200, 200, 0.5)'
      //         // type: 'linear',
      //         // x: 0,
      //         // y: 0,
      //         // x2: 1,
      //         // y2: 1,
      //         // colorStops: [{
      //         //   offset: 0, color: 'white' // 0% 处的颜色
      //         // }, {
      //         //   offset: 1, color: 'red' // 100% 处的颜色
      //         // }],
      //         // global: true // 缺省为 false
      //       },
      //
      //       animationType: 'scale',
      //       animationEasing: 'elasticOut',
      //       animationDelay: function (idx) {
      //         return Math.random() * 200;
      //       }
      //     }
      //   ]
      // };
      myChartPieLeft.setOption(option);

    },
    async getDataList(){
      // 不能用不知道为什么
      const res = await this.$http.get('/order/details')
      console.log(res)
      this.myData=res
    }

  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>
